@import "variables";
@import "mixins";

.cbi-tooltip {
  background-color: #ffffff;
  border-radius: $border-radius;
  opacity: 0;
  padding: 3px 5px;
  position: absolute;
  transition: opacity $transition-time;
  z-index: 999;
  left: -10000px;

  &.error {
    background-color: $color-red-lighten-10;
    border-color: $color-red-darken-10;
    color: #ffffff;
  }
}

.cbi-tooltip-container {
  cursor: help;

  .cbi-tooltip {
    @include tooltip-shadow;

    border: solid 1px $color-gray-lighten-60;
    cursor: default;
    pointer-events: none;

    &.ifacebadge {
      background-color: #ffffff;
      flex-direction: row;
    }
  }

  &:hover {
    .cbi-tooltip {
      left: auto;
      display: flex;
      opacity: 1;
      pointer-events: all;
    }
  }

  /* Chain references tooltips on firewall status page */
  &.references {
    .cbi-tooltip {
      li {
        white-space: nowrap;
      }
      ul {
        margin-left: 0;
      }
    }
  }
}
